<template>
  <div class="bgmask"></div>
  <el-row :gutter="20" class="player">
    <el-col :span="16">
      <el-row class="btns">
        <el-button size="large" @click="showChange">
          <i
            class="iconfont icon-shoucang"
            :class="show ? 'icon-shoucang1' : 'icon-shoucang'"
          ></i
          >&nbsp;收藏</el-button
        >
        <el-button size="large">
          <i class="iconfont icon-tianjiadao"></i>&nbsp; 添加到</el-button
        >
        <el-button size="large"
          ><i class="iconfont icon-xiazai1"></i>&nbsp;下载</el-button
        >
        <el-button size="large" @click="deleteGoods"
          ><i class="iconfont icon-shanchu"></i>&nbsp;删除</el-button
        >
        <el-button size="large" @click="clickClear"
          ><i class="iconfont icon-qingkong"></i>&nbsp;清空列表</el-button
        >
        <!-- 歌曲列表 -->
      </el-row>
      <el-row class="songlist">
        <ul class="songlistTop">
          <li>
            <el-checkbox v-model="checked" @change="change" size="large" />
          </li>
          <li>歌曲</li>
          <li>歌手</li>
          <li>时长</li>
        </ul>
        <ul class="songlists" v-if="data">
          <li v-for="(item, i) in data" :key="i">
            <div>
              <input
                type="checkbox"
                name="checkeds"
                class="checkeds"
                @click="checkedsChick($event)"
              />
            </div>
            <div>
              <div class="list-menu">
                <div><i class="iconfont icon-jiahao"></i></div>
                <div @click="indexChange(i)">
                  <i class="iconfont icon-24gl-play"></i>
                </div>
              </div>
              <div class="list-left">
                <span>{{ i + 1 }}</span
                >{{ item.name }}
              </div>
            </div>
            <div>{{ item.ar[0].name }}</div>
            <div class="shanchu">
              <span>{{ Time(item.dt) }}</span>
              <div @click="deleteGoods(i)">
                <i class="iconfont icon-shanchu"></i>
              </div>
            </div>
          </li>
        </ul>
      </el-row>
    </el-col>
    <el-col :span="8" v-if="data">
      <div class="songinfo">
        <div class="infoimg">
          <img :src="data[index].al.picUrl" alt="" />
        </div>
        <div class="infoname">歌曲名:{{ data[index].name }}</div>
        <div class="infosing">歌手: {{ data[index].ar[0].name }}</div>
        <div class="infoalbum">专辑: {{ data[index].al.name }}</div>
      </div>
      <div class="lyric" v-if="lyricinfo">
        <div ref="playLyric" class="lyricinfo">
          <p
            v-for="(item, i) in lyricinfo"
            :key="i"
            :class="{
              active:
                $store.state.currentTime * 1000 <= lyricinfo[i].time &&
                $store.state.currentTime * 1000 > lyricinfo[i].pre,
            }"
          >
            {{ item.lyric }}
          </p>
        </div>
      </div>
    </el-col>
    <div class="play">
      <i class="iconfont icon-shangyishoushangyige" @click="addIndex(-1)"></i>
      <i
        class="iconfont"
        :class="paused ? 'icon-24gl-play' : 'icon-24gl-pause'"
        @click="playto"
      ></i>
      <i class="iconfont icon-xiayigexiayishou" @click="addIndex(1)"></i>
      <div class="music">
        <div class="left" v-if="data">
          {{ data[index].name }} - {{ data[index].ar[0].name }}
        </div>
        <div class="left" v-else>00:00 / 00:00</div>
        <div class="right" v-if="data">
          {{ Time(times) }} / {{ Time(data[index].dt) }}
        </div>

        <audio
          ref="audio"
          :src="`https://music.163.com/song/media/outer/url?id=${$store.state.id}.mp3`"
        ></audio>
        <div class="jindu">
          <div class="jindubg"></div>
          <div class="jindudian">
            <div></div>
          </div>
        </div>
      </div>
      <i class="iconfont icon-xunhuan"></i>
      <i class="iconfont icon-dianzan1"></i>
      <i class="iconfont icon-xiazai1"></i>
      <i class="iconfont icon-pinglun"></i>
      <div class="yingliang">
        <i class="iconfont icon-yinliang"></i>
        <div class="jindu">
          <div class="jindubg"></div>
          <div class="jindudian">
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </el-row>
</template>

<script>
import ListItem from "./listitem.vue";
import { useStore } from "vuex";
import { ref, onMounted, onBeforeMount, computed } from "vue";
export default {
  name: "player",
  components: {
    ListItem,
  },
  setup() {
    const store = useStore();
    let data = ref(null);
    let lyricinfo = ref([]);
    var Time = null;
    let checked = ref(false);
    let leng = ref(0);
    let length = ref(0);
    let audio = ref(null);
    let paused = ref(true);
    let show = ref(false);
    var lyric = ref([]);
    let index = ref(0);
    var currentTime = null;
    var playLyric = ref(null);
    var times = ref(0);
    onMounted(async () => {
      data.value = store.state.goods;
      length.value = store.state.goods.length;
      store
        .dispatch("reqLyric", {
          id: data.value[index.value].id,
        })
        .then(() => {
          lyricinfo.value = store.getters.lyriclist;
        });
    });
    onBeforeMount(() => {
      //在页面加载时读取localStorage里的状态信息
      localStorage.getItem("userMsg") &&
        store.replaceState(
          Object.assign(
            store.state,
            JSON.parse(localStorage.getItem("userMsg"))
          )
        );
      //在页面刷新时将vuex里的信息保存到localStorage里
      // window.addEventListener("beforeunload", () => {
      //   localStorage.setItem("userMsg", JSON.stringify(store.state));
      // });
    });
    Time = computed(() => (time) => {
      //将时间戳转换成时间格式
      let cTime = time;
      var date = new Date(cTime);
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return minute + ":" + second;
    });
    function playto() {
      if (data.value) {
        if (audio.value.paused) {
          audio.value.play();
          audio.value.addEventListener(
            "ended",
            function () {
              addIndex(1);
            },
            false
          );
          paused.value = false;
          currentTime = setInterval(() => {
            store.commit("setCurrentTime", audio.value.currentTime);
            let p = document.querySelector(".active");
            let dian = document.querySelector(".jindudian");
            if (p) {
              let offsetTop = p.offsetTop;
              if (offsetTop > 50) {
                playLyric.value.style.top = -(offsetTop - 50) + "px";
              }
              let h = playLyric.value.offsetHeight;
              if (offsetTop > h) {
                playLyric.value.top = playLyric.value.top + (offsetTop - h / 2);
              }
            }
            times.value = audio.value.currentTime * 1000;
            dian.style.width =
              Math.ceil(
                ((times.value * 100) / data.value[index.value].dt).toFixed(2)
              ) + "%";
            if (times.value >= data.value[index.value].dt) {
              dian.style.width = "100%";
            }
          }, 100);
        } else {
          audio.value.pause();
          paused.value = true;
          clearInterval(currentTime);
        }
      }
    }
    function checkedsChick(event) {
      if (event.target.checked == true) {
        leng.value += 1;
      } else {
        leng.value -= 1;
      }
      if (leng.value == length.value) {
        checked.value = true;
      } else {
        checked.value = false;
      }
    }
    function change(str) {
      checked.value = str;
      if (str) {
        leng.value = length.value;
      } else {
        leng.value = 0;
      }
      document.querySelectorAll(".checkeds").forEach((item) => {
        item.checked = str;
      });
    }
    async function indexChange(value) {
      index.value = value;
      if (data.value) {
        store.commit("setId", data.value[index.value].id);
        paused.value = false;
        store
          .dispatch("reqLyric", {
            id: data.value[index.value].id,
          })
          .then(() => {
            lyricinfo.value = store.getters.lyriclist;
            audio.value.pause();
            playto();
          });
      }
    }
    function addIndex(value) {
      index.value += value;
      if (index.value < 0) {
        index.value = length.value - 1;
      } else if (index.value >= length.value) {
        index.value = 0;
      }
      indexChange(index.value);
    }
    function showChange() {
      show.value = !show.value;
    }
    function deleteGoods(i) {
      let arr = [];
      if (i >= 0) {
        arr.push(i);
      } else {
        let checkeds = document.querySelectorAll(".checkeds");
        checkeds.forEach((item, index) => {
          if (item.checked) {
            arr.push(index);
          }
          item.checked = false;
          arr.sort((a, b) => b - a);
        });
      }
      store.commit("goodsCheange", arr);
      localStorage.setItem("userMsg", JSON.stringify(store.state));
      length.value = store.state.goods.length;
    }
    function clickClear() {
      data.value = null;
      store.commit("goodsClear", 0);
      store.commit("setId", 0);
      localStorage.setItem("userMsg", JSON.stringify(store.state));
    }
    return {
      data,
      Time,
      checkedsChick,
      change,
      checked,
      lyricinfo,
      audio,
      playto,
      paused,
      lyric,
      index,
      indexChange,
      addIndex,
      show,
      playLyric,
      times,
      showChange,
      clickClear,
      deleteGoods,
    };
  },
};
</script>

<style lang="less" scoped>
.bgmask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(255, 240, 240);
}
.player {
  width: 80%;
  min-height: e("calc(100vh - 125px)");
  margin: 0 auto !important;
  position: relative;
  .el-col {
    max-height: 550px;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .btns {
    width: 90%;
    margin: 0 auto;
    display: flex;
    .el-button {
      flex: 1;
      background: rgb(255, 240, 240);
    }
  }
  .songlist {
    width: 90%;
    margin: 0 auto;
    text-align: left;
    .el-checkbox {
      display: block;
    }
    .songlistTop {
      width: 100%;
      display: flex;
      justify-content: space-beteem;
      color: #999;
      li {
        flex: 1;
        line-height: 57px;
        padding: 8px 0 8px 0px;
        list-style: none;
        .el-checkbox {
          line-height: 60px;
          margin-left: 4px;
        }
        :deep(.el-checkbox.el-checkbox--large) .el-checkbox__inner {
          width: 16px;
          height: 16px;
          background: rgb(255, 240, 240);
          &::after {
            // 里面的对钩
            border-color: rgb(255, 240, 240);
            transform: rotate(37deg) scaleY(1);
            height: 10px;
            left: 5px;
          }
        }
        :deep(.el-checkbox__input.is-focus) .el-checkbox__inner {
          border-color: #d9d9d9;
        }
        :deep(.el-checkbox__input.is-checked) .el-checkbox__inner {
          background-color: #409eff;
        }
      }
    }
    .songlists {
      width: 100%;
      color: #999;
      li {
        display: flex;
        height: 40px;
        justify-content: space-around;
        position: relative;
        div {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex: 1;
          padding: 16px 0 8px 0px;
          // border-bottom: 1px solid #dcdfe6;
          vertical-align: middle;
          line-height: 100%;
          position: relative;
          .list-left {
            padding: 0;
            border: 0;
            width: 100%;
            height: 100%;
            span {
              display: inline-block;
              width: 20px;
            }
          }
          .list-menu {
            height: 32px;
            padding: 0;
            border: 0;
            float: right;
            position: absolute;
            top: 5px;
            right: 3px;
            white-space: nowrap;
            opacity: 0;
            z-index: 9;
            background: rgb(255, 240, 240);
            div {
              padding: 0;
              float: right;
              width: 30px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              border: 1px solid #dcdfe6;
              border-radius: 50%;
              margin: 0 5px 0 15px;
            }
            div:hover {
              border-color: #89d3af;
              .iconfont {
                color: #89d3af;
              }
            }
            .iconfont {
              height: 27px;
              font-size: 18px;
            }
          }
          input[type="checkbox"] {
            width: 14px;
            height: 14px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 14px;
            position: relative;
          }
          input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: rgb(255, 240, 240);
            width: 100%;
            height: 100%;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
          }
          input[type="checkbox"]:checked::before {
            content: "\2713";
            background-color: #409eff;
            border: 1px solid #999;
            // border-radius: 4px;
            color: #fff;
          }
        }
        .shanchu {
          div {
            display: none;
            position: relative;
            top: -11px;
            left: -10px;
            padding: 0;
            float: right;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #dcdfe6;
            border-radius: 50%;
            .iconfont {
              font-size: 18px;
            }
          }
          div:hover {
            border-color: #31c27c;
            .iconfont {
              color: #31c27c;
            }
          }
        }
      }
      li:hover {
        .list-menu {
          opacity: 1;
          transition: all 100ms;
        }
        .shanchu {
          span {
            display: none;
          }
          div {
            display: block;
          }
        }
      }
    }
    .songlistTop > li:nth-child(1),
    .songlists li > div:nth-child(1) {
      flex: 0.4;
      padding-left: 5px;
      color: #999;
    }
    .songlistTop > li:nth-child(2),
    .songlists li > div:nth-child(2) {
      flex: 5;
      padding-left: 20px;
    }
    .songlistTop > li:nth-child(2) {
      padding-left: 40px;
    }
    .songlistTop > li:nth-child(3),
    .songlists li > div:nth-child(3) {
      flex: 2;
    }
  }
  .songinfo {
    width: 300px;
    margin: 0 auto;
    background: rgb(255, 240, 240);
    .infoimg {
      width: 186px;
      height: 186px;
      margin: 0 auto;
      margin-bottom: 15px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .infoname,
    .infoalbum {
      height: 28px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    div {
      line-height: 28px;
    }
  }
  .lyric {
    height: 50%;
    overflow: hidden;
    div {
      position: relative;
      top: 0px;
      overflow: auto;
      p {
        margin: 0;
        line-height: 25px;
      }
    }
    .active {
      color: red;
    }
  }
}
.play {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0px;
  line-height: 100px;
  width: 100%;
  min-height: 100px;
  color: #999;
  font-size: 12px;
  background-color: rgb(255, 240, 240);
  .iconfont {
    font-size: 32px;
    flex: 1;
    height: 100%;
  }
  .iconfont:hover {
    color: #89d3af;
  }
  div {
    flex: 3;
  }
  .music {
    padding: 30px 10px 0;
    height: 60px;
    position: relative;
    div {
      height: 30px;
      line-height: 30px;
    }
    .left {
      float: left;
    }
    .right {
      right: 0;
      top: 30px;
      z-index: 2;
      position: absolute;
      padding-left: 10px;
      background: rgb(255, 240, 240);
    }
  }
  .jindu {
    clear: both;
    padding-top: 5px;
    div {
      width: 100%;
      height: 0px;
      border: 0.5px solid #ccc;
    }
    .jindudian {
      width: 0%;
      position: relative;
      border: 0.5px solid #fff;
      top: -2px;
      div {
        width: 2px;
        position: relative;
        top: -3px;
        float: right;
        border: 3px solid #ffffff;
        border-radius: 50%;
      }
    }
  }
  .yingliang {
    width: 80px;
    i {
      float: left;
    }
    .jindu {
      clear: none;
      float: left;
      width: 80px;
      height: 40px;
      padding-top: 50px;
      padding-left: 10px;
    }
    .jindudian {
      width: 50%;
    }
  }
}
</style>
